<template>
  <div class="audio-container">
    <audio
      preload
      ref="audio"
      class="audio-html"
      controls
      @canplay="canplayHandle"
      @play="playHandle"
      @pause="pauseHandle"
      @timeupdate="timeupdateHandle"
      @ended="endedHandle"
    >
      <source src="" ref="audioSource" />
    </audio>
    <div class="my-audio">
      <div class="my-control-group">
        <div class="controls">
          <span @click="preSong">
            <el-icon :size="32" color="#0ca986"> <arrow-left-bold /> </el-icon>
          </span>
          <span v-show="!isPlay" @click="playBtn">
            <el-icon :size="32" color="#0ca986" class="play-icon">
              <caret-right />
            </el-icon>
          </span>
          <span v-show="isPlay" @click="pauseBtn">
            <el-icon :size="32" color="#0ca986">
              <video-pause />
            </el-icon>
          </span>
          <span @click="nextSong">
            <el-icon :size="32" color="#0ca986"> <arrow-right-bold /> </el-icon>
          </span>
          <span class="time">
            {{ currentTimeStr ? currentTimeStr : '00:00' }} /{{
              durationStr ? durationStr : '00:00'
            }}</span
          >
          <play-list />
        </div>
        <div class="slider">
          <el-slider
            v-model="sliderValue"
            @change="silderChange(sliderValue)"
          ></el-slider>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import emitter from '@/utils/mitt/eventbus'
import playList from '../play-list/play-list.vue'
import musicFormat from '../utils/index'
import localCache from '@/utils/cache'

export default defineComponent({
  props: {
    songImg: String
  },
  components: { playList },
  setup() {
    let playUrl = ref(null)
    let isPlay = ref(false)
    let canPlay = ref(false)
    const audio = ref<any>(null)
    const audioSource = ref<any>(null)
    const durationStr = ref('')
    const currentTimeStr = ref('')
    const sliderValue = ref(0)
    const currentIndex = ref(0)
    const playList = localCache.getCache('currentSong').playCacheList

    emitter.on('getSongUrl', (songUrl: any): void => {
      playUrl.value = songUrl
      audioSource.value.src = playUrl.value
      audio.value.load()
    })
    emitter.on('isPlaying', (startPlay: any): void => {
      isPlay.value = startPlay
      audio.value.play()
    })

    const preSong = () => {
      console.log('上一首')
      audio.value.pause()
      currentIndex.value += 1
      console.log(currentIndex.value)
      audioSource.value.src = playList[currentIndex.value]
      audio.value.load()
      audio.value.play()
    }
    const playBtn = (): void => {
      audio.value.play()
      isPlay.value = true
    }
    const pauseBtn = (): void => {
      audio.value.pause()
      isPlay.value = false
    }

    const nextSong = () => {
      console.log('下一首')
      audio.value.pause()
      if (currentIndex.value > 0) {
        currentIndex.value -= 1
        console.log(currentIndex.value)
        audioSource.value.src = playList[currentIndex.value]
        audio.value.load()
        audio.value.play()
      } else {
        console.log('没有下一首')
      }
    }

    const canplayHandle = () => {
      console.log('歌曲准备就绪')
      canPlay.value = true
      durationStr.value = musicFormat.timeFormat(audio.value.duration)
    }
    const silderChange = (sliderValue: number) => {
      console.log(sliderValue)
      if (canPlay.value) {
        audio.value.currentTime = Math.floor(
          (sliderValue / 100) * audio.value.duration
        )
      }
    }
    const playHandle = () => {
      //console.log('开始播放')
      isPlay.value = true
    }
    const timeupdateHandle = () => {
      //console.log('正在播放')
      sliderValue.value = Math.floor(
        (audio.value.currentTime / audio.value.duration) * 100
      )
      currentTimeStr.value = musicFormat.timeFormat(audio.value.currentTime)
    }
    const pauseHandle = () => {
      //console.log('暂停')
      isPlay.value = false
    }
    const endedHandle = () => {
      console.log('歌曲播放完毕')
    }

    return {
      audio,
      audioSource,
      preSong,
      playBtn,
      pauseBtn,
      nextSong,
      playUrl,
      sliderValue,
      isPlay,
      canPlay,
      canplayHandle,
      playHandle,
      timeupdateHandle,
      pauseHandle,
      endedHandle,
      durationStr,
      currentTimeStr,
      silderChange
    }
  }
})
</script>

<style scoped lang="less">
.audio-container {
  height: 100px;
  width: 100%;
  position: absolute;
  bottom: 0;
  .audio-html {
    position: absolute;
    opacity: 0.4;
  }
  .my-audio {
    width: 100%;
    padding: 0 10px;
    color: #fff;
    background: rgb(27, 27, 27);

    .my-control-group {
      height: 100px;
      display: flex;
      align-items: center;

      .controls {
        flex: 1;
        border: 1px solid #fff;
        border-radius: 50px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        span {
          padding: 2px;
          display: inline-block;
          border-radius: 50px;
          transition: all ease 0.6s;
          &:hover {
            transform: scale(1.1);
            transform: rotateX(30deg);
          }
          .play-icon {
            border-radius: 50%;
            border: 1px solid #0ca986;
          }
        }
      }
      .slider {
        flex: 1;
        margin: 0 0 0 0.3rem;
      }
      .time {
        color: rgb(219, 219, 219);
        min-width: 80px;
        max-width: 87px;
        font-size: 0.14rem;
      }
    }
  }
}
</style>
